<template>
	<view>
		<form @submit="formSubmit">

			<tui-list-cell backgroundColor="#fff" :hover="false">
				<view class="tui-line-cell">
					<view class="tui-title">商家手机号</view>
					<input placeholder-class="tui-phcolor" class="tui-input tui-pr__30" name="mobile"
						placeholder="请输入商家手机号" type="number" v-model="mobile" />
				</view>
			</tui-list-cell>

			<view class="tui-btn-box">
				<button class="tui-button-primary" hover-class="tui-button-hover" formType="submit"
					type="primary">提交</button>

			</view>

		</form>

	</view>
</template>

<script>
	import form from '@/components/common/tui-validation/tui-validation.js'
	import {
		submitTask
	} from '@/apis/user'
	export default {
		data() {
			return {
				mobile: '',
				id: ''

			}
		},
		onShow() {
			this.id = this.$yroute.query.id;
		},
		methods: {
			formSubmit: function(e) {
				let that = this;
				let rules = [{
					name: "mobile",
					rule: ['required', 'isMobile'],
					msg: ['请输入手机号码', '请输入正确的手机号码']
				}]
				//进行表单检查
				let formData = e.detail.value;
				console.log(formData);
				let checkRes = form.validation(formData, rules);
				console.log("checkRes" + checkRes)
				if (checkRes) {
					that.tui.toast('请将信息填写完整');
					return
				}
				submitTask({
						phone: that.mobile,
						taskId: that.id
					}).then(res => {
						console.log(res)
						this.$yrouter.back();
					})
					.catch(err => {
						console.log(err)
						uni.showToast({
							title: err.msg,
							icon: 'none',
							duration: 2000,
						})
					})
			},
		}
	}
</script>

<style>
	.tui-line-cell {
		width: 100%;
		box-sizing: border-box;
		display: flex;
		align-items: center;
	}

	.tui-title {
		line-height: 32rpx;
		min-width: 120rpx;
		flex-shrink: 0;
	}

	.tui-cell-content {
		line-height: 32rpx;
		min-width: 120rpx;
		flex-shrink: 0;
	}

	.tui-input {
		font-size: 32rpx;
		color: #333;
		padding-left: 20rpx;
		flex: 1;
		overflow: visible;
	}

	.tui-btn-box {
		padding: 40rpx 50rpx;
		box-sizing: border-box;
	}
</style>
